<route lang="yaml">
meta:
  requiresAuth: true
</route>

<template>
  <el-table :data="allOrderlist" style="width: 100%">
    <el-table-column prop="item.name" label="商品名称" width="100" />
    <el-table-column prop="itemPrice" label="价格" width="100" />
    <el-table-column prop="createdAt" label="下单时间" width="100" />
    <el-table-column prop="status" label="状态" width="100" />
    <el-table-column label="Operations" width="150">
      <template #default="scope">
        <el-button @click="goItem(scope.row.item.id)" size="small">
          跳转
        </el-button>
        <el-button @click="itemDeatail(scope.row.id)" size="small">
          详情
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <div v-if="deatailshow">
    <span>商品名称:</span> <span>{{detail[0].item.name}}</span> <br />
    <span>商品描述:</span> <span>{{detail[0].item.description}}</span> <br />
    <span>商品原价:</span> <span>{{detail[0].item.originalPrice}}</span> <br />
    <span>商品现价:</span> <span>{{detail[0].item.price}}</span> <br />
    <span>下单时间:</span> <span>{{detail[0].createdAt}}</span> <br />
    <span>收货地址:</span> <span>{{detail[0].address.address}}</span> <br />
    <span>接收的手机号:</span> <span>{{detail[0].user.mobile}}</span> <br />
    <span>运费:</span> <span>{{detail[0].shippingFee}}</span> <br />
    <span>店家名称:</span> <span>{{detail[0].seller.profile.nickname}}</span> <br />
    <span>店家联系方式:</span> <span>{{detail[0].seller.mobile}}</span> <br />
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { getAllorder, getorderdetails } from '../../services/auth'
import { useRouter } from 'vue-router'
const router = useRouter()
const allOrderlist = ref()
onMounted(async () => {
  try {
    allOrderlist.value = (await getAllorder()).data
    console.log(allOrderlist.value)
  } catch (error) {}
})
function goItem(id: string) {
  router.push(`/itemDetails/${id}`)
}
const detail = ref()
const deatailshow = ref<boolean>(false)
async function itemDeatail(id: string) {
  detail.value = (await getorderdetails(id)).data
  deatailshow.value = true
  console.log(detail.value)
}
</script>
